// 轮播
function Banner(ele) {
  this.oBox = $(ele);
  this.oBan_Lis = this.oBox.find('.banner_lists');
  this.oPoint_Lis = this.oBox.find('.point_list');


  this.index = 0;
  this.timer = null;
  this.w 
  this.flag = true;
  this.bannerShow()
}

Banner.prototype.bannerShow = function () {
  banner().then(res => { 
    console.log(res);
    var html1 = ""
    var html2 = ""
    res.data.forEach(v => {
      html1 += `<li class="banner_item">
      <a href="./detail.html?id=${v.goods_id}">
      <img src="${v.banner_img}" alt="" title="${v.banner_title}">
       </a>
      </li>`

      html2 += `<li class="point"></li>`
    });
    
    html1 += `<li class="banner_item">
    <a href="./detail.html?id=${res.data[0].goods_id}">
    <img src="${res.data[0].banner_img}" alt="" title="${res.data[0].banner_title}">
     </a>
    </li>`
    this.oBan_Lis.html(html1)
    this.oPoint_Lis.html(html2)
    this.oPoint_Lis.find("li:nth-of-type(1)").addClass("active")

    this.window = window
    this.w = $('.banner_box').width();
    console.log(this.w);
    this.autoPlay();
    this.event();
  })
}


Banner.prototype.autoPlay = function () {
  // 定时器
  this.timer = setInterval(() => {
    this.index++;
    this.flag = false;
    this.oBan_Lis.animate({
      left: -this.index * this.w
    }, () => {
      // 动画播放完毕
      this.flag = true;

      if (this.index === $('.banner_item').length - 1) {
        this.index = 0;
        this.oBan_Lis.css('left', 0)
      }
    })
    this.dot()
  }, 2000)
}

Banner.prototype.dot = function () {
  // 小点也变
  if (this.index === $('.banner_item').length - 1) {
   $('.point').removeClass('active').eq(0).addClass('active')
  } else {
   $('.point').removeClass('active').eq(this.index).addClass('active')
  }
}

Banner.prototype.event = function () {

  this.oBox.on('mouseover', () => {
    clearInterval(this.timer)
  })
  this.oBox.on('mouseout', () => {
    clearInterval(this.timer)
    this.autoPlay()
  })
  this.window.onblur = () => {
    clearInterval(this.timer)
  }
  this.window.onfocus = () => {
    clearInterval(this.timer)
    this.autoPlay()
  }


  // 上翻页
  $('.banner_prev').on('click', () => {
    if (this.flag) {
      clearInterval(this.timer);
      if (this.index === 0) {
        this.index = $('.banner_item').length - 1;
        this.oBan_Lis.css('left', -this.index * this.w)
      }
      this.index--;
      this.flag = false;
      this.oBan_Lis.animate({
        left: -this.index * this.w
      }, () => {
        this.flag = true;
      })
      this.dot()
      this.autoPlay();
    }
  })
  // 下翻页
  $('.bannner_next').on('click', () => {
    if (this.flag) {
      clearInterval(this.timer);
      if (this.index === $('.banner_item').length - 1) {
        this.index = 0;
        this.oBan_Lis.css('left', -this.index * this.w)
      }
      this.index++;
      this.flag = false;
      this.oBan_Lis.animate({
        left: -this.index * this.w
      }, () => {
        if (this.index == $('.banner_item').length - 1) {
          this.index = 0
          this.oBan_Lis.css('left', 0)
        }
        this.flag = true;
      })
      this.dot()
      this.autoPlay();
    }
  })

  // 小点切换
  const _this = this;
 $('.point').on('click', function () {
    clearInterval(_this.timer);
    _this.index = $(this).index();
    _this.oBan_Lis.animate({
      left: -_this.index * _this.w
    })
    _this.dot()
    // _this.autoPlay();
  })
}


new Banner('.banner')

